<template>
	<view class="change-password-with-old">
		<up-cell-group class="setting-form" :border="false">
			<up-cell :title="$t('change.password.with.old.query1')">
				<template #value>
					<up-input v-model="formData.oldPassword" border="none" :placeholder="$t('change.password.with.old.query1.placeholder')"></up-input>
				</template>
			</up-cell>
			<up-cell :title="$t('change.password.with.old.query2')">
				<template #value>
					<up-input v-model="formData.newPassword" border="none" password :placeholder="$t('change.password.with.old.query2.placeholder')"></up-input>
				</template>
			</up-cell>
			<up-cell :title="$t('change.password.with.old.query3')">
				<template #value>
					<up-input v-model="formData.confirmPassword" border="none" password
                    :placeholder="$t('change.password.with.old.query3.placeholder')"></up-input>
				</template>
			</up-cell>
		</up-cell-group>
		<view class="actions">
			<up-button type="primary" size="large" shape="circle" @tap="handleComplete">{{$t('change.password.with.old.complete.btn')}}</up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		nextTick,
		reactive
	} from 'vue';
	import {
		changePasswordByOldPassword
	} from '../../apis/components/system';
	import {
		useAppStore
	} from '../../store/app';
    import { useI18n } from "vue-i18n";
    const { t } = useI18n();

	const store = useAppStore()
	const formData = reactive({
		confirmPassword: "",
		newPassword: "",
		oldPassword: ""
	})


	const verifyFields = () => {
		if (!formData.oldPassword) {
			return t('change.password.with.old.query1.placeholder');
		} else if (formData.oldPassword.length < 6) {
			return t('change.password.with.old.field.error1');
		} else if (!formData.newPassword) {
			return t('change.password.with.old.query2.placeholder');
		} else if (formData.newPassword.length < 6) {
			return t('change.password.with.old.field.error2');
		} else if (!formData.confirmPassword) {
			return t('change.password.with.old.query3.placeholder');
		} else if (formData.confirmPassword !== formData.newPassword) {
			return t('change.password.with.old.field.error3');
		}
		return null;
	}
	const handleComplete = async () => {
		try {
			const message = verifyFields();
			if (message) {
				uni.showToast({
					icon: 'none',
					title: message
				})
				return;
			}
			await changePasswordByOldPassword(formData);
			await store.logout();
			uni.redirectTo({
				url: '/pages/change-passwd-successful/change-passwd-successful'
			})
		} catch (err) {
			console.log(err);
			uni.showToast({
				icon: "none",
				title: typeof err === "string" ? err : err.message
			})
		}
	}
</script>

<style lang="scss" scope>
	.change-password-with-old {
		padding: 24rpx 32rpx;

		.setting-form {
			border-radius: 16rpx;

			& ::v-deep .u-cell__body__content {
				flex: none;
				width: 208rpx;
			}
		}

		.actions {
			margin-top: 164rpx;
		}
	}
</style>
